<template>
  <div class="main">
    <a-steps :current="current">
      <a-step title="填写信息"></a-step>
      <a-step title="确认信息"/>
      <a-step title="完成"/>
    </a-steps>
    <div class="steps-content">
      <div v-if="current === 0">
        <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="公司名称" prop="company">
            <a-input v-model="form.company"/>
          </a-form-model-item>
          <a-form-model-item label="打款账号" prop="number">
            <a-input v-model="form.number"/>
          </a-form-model-item>
          <a-form-model-item label="收购商品" required>
            <a-select v-model="selectIndex" placeholder="请选择商品">
              <a-select-option :value="index" v-for="(item, index) in commodityList" :key="index">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="商品数量" required>
            <a-input-number v-model="form.count" :min="1"/>
          </a-form-model-item>
          <a-form-model-item label="预留电话" prop="phone">
            <a-input v-model="form.phone"/>
          </a-form-model-item>
          <a-form-model-item label="备注信息" prop="description">
            <a-input v-model="form.description" type="textarea" :rows="4"/>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
            <a-button type="primary" @click="next">
              下一步
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-if="current === 1" class="check">
        <p>收货公司： {{ form.company }}</p>
        <p>打款账号： {{ form.number }}</p>
        <p>收购商品： {{ form.commodity }}</p>
        <p>商品数量： {{ form.count }}</p>
        <p>预留电话： {{ form.phone }}</p>
        <p>备注信息： {{ form.description }}</p>
        <a-divider orientation="right">
          金额总计： {{ form.price }}
        </a-divider>
        <a-button type="danger" style="margin-right: 20px" :loading="loading" @click="submit">提交</a-button>
        <a-button @click="current = 0">上一步</a-button>
      </div>
      <div v-if="current === 2">
        <a-result
            status="success"
            title="提交成功"
        >
          <template #extra>
            <a-button key="buy" @click="again">
              再次填写销售发票
            </a-button>
          </template>
        </a-result>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      labelCol: {span: 6},
      wrapperCol: {span: 12},
      current: 0,
      selectIndex: '',
      drivers: [],
      vehicles: [],
      commodityList: [],
      form: {
        company: '',
        number: '',
        commodity: '',
        count: 50,
        price: 0,
        phone: '',
        description: '',
      },
      rules: {
        company: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
        number: [{required: true, message: '请输入打款账号', trigger: 'blur'}],
        phone: [{required: true, message: '请输入预留电话', trigger: 'blur'}],
        description: [{required: true, message: '请输入备注信息', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.getRequest('/api/commodity/?name=' + '').then(resp => {
        this.commodityList = resp
      })
    },
    next() {
      if (this.selectIndex === '') {
        this.$message.error('未选择收购商品')
        return
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          let commodity = this.commodityList[this.selectIndex]
          this.form.price = this.form.count * commodity.price
          this.form.commodity = commodity.name
          this.current = 1
        }
      })
    },
    submit() {
      this.loading = true
      let commodity = this.commodityList[this.selectIndex]
      this.form.commodity = commodity.id
      this.postRequest('/api/sale/', this.form).then(resp => {
        if (resp) {
          this.loading = false
          this.current = 2
        } else {
          this.loading = false
        }
      })
    },
    again() {
      this.load()
      this.form = {
        company: '',
        number: '',
        commodity: '',
        count: 50,
        price: 0,
        phone: '',
        description: '',
      }
      this.current = 0
    }
  },
}
</script>

<style scoped>
.main {
  padding: 50px 180px;
  background: #ffffff;
}

.steps-content {
  margin-top: 40px;
}

.check {
  padding-left: 200px;
}

.check p {
  padding-bottom: 10px;
}

.dis {
  padding-left: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: red;
}
</style>